<template>
  <div class="app">
    <!--  头部导航start-->
   <header>
     <p @click="toggle"> 
         <span v-show="!isSpread">
             <i class="fa fa-angle-double-down fa-lg"></i>
         </span>
        <span v-show="isSpread">
            <i class="fa fa-angle-double-right fa-lg"></i>
        </span>
    </p>
     <p >移动库房</p>
     <p><i class="fa fa-user-o fa-lg"></i></p> 
  </header> 
    <!-- 左侧边栏start -->
    <article>
      <transition name="slide-fade">
      <aside v-show="!isSpread" @click="hiddenNews">
        <p>异常警告</p> 
         <ul>
           <li>
             <el-tooltip class="item" effect="dark" content="库房异常" placement="top">
                <router-link to="/warehouse">
                   <i class="fa fa-university fa-lg"></i>
                    <span v-show="warehouseNumber">{{warehouseNumber}}</span>
                </router-link>
             </el-tooltip>
           </li>
           <li>
               <el-tooltip class="item" effect="dark" content="温适度异常" placement="top">
                  <router-link to="/temperature">
                      <i class="fa fa-thermometer fa-lg "></i>
                      <span v-show="temperatureNumber">{{temperatureNumber}}</span>
                  </router-link>
                 </el-tooltip>
           </li>
           <li>
               <el-tooltip class="item" effect="dark" content="档案出入变动" placement="top">
                <router-link to="/archives">
                    <i class="fa fa-edit fa-lg "></i>
                    <span v-show="archivesNumber">{{archivesNumber}}</span>
                </router-link>
                </el-tooltip>
           </li>
            <li>
              <el-tooltip class="item" effect="dark" content="消防报警" placement="top">
                    <router-link to="/fire">
                      <i class="fa fa-fire fa-lg "></i>
                      <span v-show="fireNumber">{{fireNumber}}</span>
                    </router-link>
              </el-tooltip>
           </li>
            <li>
               <el-tooltip class="item" effect="dark" content="视频监控" placement="top">
                  <router-link to="/monitoring">
                      <i class="fa fa-camera-retro fa-lg "></i>
                    </router-link>
                 </el-tooltip>
           </li>
            <li>
                <el-tooltip class="item" effect="dark" content="综合分析" placement="top">
                  <router-link to="/analyze">
                  <i class="fa fa-bar-chart fa-lg"></i>
                  </router-link>
                </el-tooltip>
           </li>

         </ul>
      </aside>
      </transition>
       <!-- 右边展示详细信息start -->
      <section>
       <transition name="slide">
         <router-view/>
        </transition>
      </section>
    </article>
    <!-- 底部状态 -->
    <footer>系统运行中</footer>
  </div>
</template>

<script>
// 引入当前组件的样式表
import "./scss/main.scss";
// 引入vue mapState 辅助函数快速生成计算属性
import { mapState } from "vuex";
// 引入vue 辅助函数将组件中的 methods 映射为 store.commit 调用
import { mapMutations } from "vuex";
export default {
  data() {
    return {
      // 异常提示内容
      message: "",
      // 头部控制展开折叠
      isSpread: false
      
    };
  },
  created() {
    var _that = this;
    var url = api + "/api/Warehouse/move";
    // 开启时时请求异常信息
    this.requireMesnumber(url);
  },
  computed: {
    // 把state里面是数据生成计算属性，根据返回结果动态更改异常信息数量
    ...mapState({
      // 显示仓库异常信息的数量
      warehouseNumber(state) {
        return state.mesNumbers.warehouse;
      },
      // 显示温适度异常信息的数量
      temperatureNumber(state) {
        return state.mesNumbers.temperature;
      },
      // 显示档案除入库信息的数量
      archivesNumber(state) {
        return state.mesNumbers.archives;
      },
      // 显示消防警报信息的数量
      fireNumber(state) {
        return state.mesNumbers.fire;
      }
    })
  },
  methods: {
    // 隐射方法调用为为store.commit
    ...mapMutations(["changeMesNumber", "clearMesNumber"]),
    // 请求异常情况
    requireMesnumber(url) {
      var _that = this;
      // 开启定时器时时请求数据
      setInterval(function() {
        $.ajax({
          type: "GET",
          url: url,
          dataType: "json",
        /*   xhrFields: {
            withCredentials: true
          },
          crossDomain: true, */
          data: {
            t: new Date().valueOf() - 100000000,
            token:JSON.parse(localStorage.getItem("token"))
          },
          success: function(result) {
              console.log("root返回结果", result);
            if(result.state == -1){
              alert(result.message)
                _that.$router.push("/login");
            }else{
                  // 请求成功以后的回调函数
          
            // 显示异常提示弹框
            _that.open2(result);
            // 请求异常信息数量，更改store 的状态
            _that.changeMesNumber(result);
            }
            
          },
          error: function(error) {
            // 请求失败的回调函数
            alert("系统异常");
          }
        });
        // 设置请求异常的间隔时间
      }, 10000);
    },
    // 点击显示隐藏侧边栏
    toggle() {
      this.isSpread = !this.isSpread;
    },
    // 点击侧边栏消失
    hiddenNews() {
      this.isSpread = true;
    },
    // 显示异常提醒的类型
    open2(result) {
      var that = this;
      result.forEach(item => {
        switch (item.Type) {
          case "warehouse": {
            if (item.Count != 0) {
              setTimeout(function() {
                that.$notify({
                  message: "库房异常提醒",
                  type: "warning",
                  offset: 100,
                  duration:2000
                });
              }, 0);
            }
            break;
          }
          case "temperature": {
            if (item.Count != 0) {
              setTimeout(function() {
                that.$notify({
                  message: "温湿度异常提醒",
                  type: "warning",
                  offset: 100,
                   duration:2000
                });
              }, 500);
            }
            break;
          }
          case "archives": {
            if (item.Count != 0) {
              setTimeout(function() {
                that.$notify({
                  message: "档案出入库提醒",
                  type: "warning",
                  offset: 100,
                   duration:2000
                });
              }, 1000);
            }
            break;
          }
          case "fire": {
            if (item.Count != 0) {
              setTimeout(function() {
                that.$notify({
                  message: "消防报警提醒",
                  type: "warning",
                  offset: 100,
                   duration:2000
                });
              }, 1500);
            }
            break;
          }
        }
      });
    }
  }
};
</script>

<style lang="css">
.slide-fade-enter-active {
  transition: all 0.5s ease;
}
.slide-fade-leave-active {
  transition: all 0.5s ease;
}
.slide-fade-enter,
.slide-fade-leave-to {
  transform: translateX(-10px);
  opacity: 0;
}
.slide-enter-active {
  transition: all 1s ease;
}
</style>
